import './index.scss'
import { Form, Button, Input, Dialog, Toast } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { fetchLoginApi } from '@/store/modules/user'
import { useDispatch } from 'react-redux'
import CODE from '@/apis/code.config'
import apis from '@/apis'
const Login: React.FC = () => {
  const navigate = useNavigate()
  const [visible, setVisible] = useState(false)
  const [form] = Form.useForm()
  const dispatch = useDispatch()
  const [tips, settips]: any = useState(null)
  useEffect(() => {
    async function queryInfo() {
      const res = await apis.getInfoApi()
      settips(res.tips)
    }
    queryInfo()
  }, [])
  function onFinish({
    username,
    password,
  }: {
    username: string
    password: string
  }) {
    if (!username)
      return Toast.show({
        content: '请输入用户名',
      })
    if (!password)
      return Toast.show({
        content: '请输入密码',
      })
    Dialog.confirm({
      confirmText: 'OK',
      cancelText: '不OK',
      content: (
        <div>
          {tips && tips.map((item, index) => <p key={index}>{item}</p>)}
        </div>
      ),
      onConfirm: async () => {
        const res = await dispatch(fetchLoginApi({ username, password }))
        if (res.code !== CODE.SUCCESS) {
          Toast.show({
            content: res.message,
          })
        } else {
          Toast.show({
            content: '登录成功',
          })
          navigate('/mobile/leave')
        }
      },
    })
  }
  let [btnText, setBtnText] = useState('清屏')
  let [showLoginBox, setShowLoginBox] = useState(true)
  const btnTextClick = () => {
    if (btnText === '清屏') {
      setShowLoginBox(false)
      setBtnText('显示')
    } else {
      setBtnText('清屏')
      setShowLoginBox(true)
    }
  }
  return (
    <div className="b-g">
      <Button
        color="default"
        onClick={btnTextClick}
        style={{
          marginTop: 20,
        }}
      >
        {btnText}
      </Button>
      <div className={showLoginBox ? 'visible' : 'hidden'}>
        <div className="title_box">您好，请先登录</div>
        <Form
          layout="horizontal"
          onFinish={onFinish}
          form={form}
          footer={
            <Button block type="submit" color="primary" size="large">
              登录
            </Button>
          }
        >
          <Form.Item label="用户名" name="username">
            <Input placeholder="请输入用户名" clearable />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            extra={
              <div className="eye">
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <Input
              placeholder="请输入密码"
              clearable
              type={visible ? 'text' : 'password'}
            />
          </Form.Item>
        </Form>
        <div className="btnBox">
          <Button
            block
            type="primary"
            onClick={() => {
              form.setFieldsValue({ username: 'test', password: '123456' })
            }}
          >
            一键填充账号密码
          </Button>
          <Button
            block
            type="primary"
            style={{ marginTop: 20 }}
            onClick={() => {
              navigate('/mobile')
            }}
          >
            返回首页
          </Button>
        </div>
        <div className="btn_box">
          <Button
            color="primary"
            fill="none"
            onClick={() => {
              navigate('/mobile/register/Y')
            }}
          >
            注册账号
          </Button>
          <Button
            color="primary"
            fill="none"
            onClick={() => {
              navigate('/mobile/register/N')
            }}
          >
            忘记密码
          </Button>
        </div>
      </div>
    </div>
  )
}
export default Login
